<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title></title>
		<link rel="stylesheet" href="bootstrap.min.css">
	</head>
	<style>
		.box{
			margin-top: 100px;
		}
		.table{
			margin-top: 25px;
		}
		a{
			cursor: pointer;
		}
		.active{
			color: #23527c;
		    background-color: #eee;
		    border-color: #ddd;
		}
	</style>
	<body>
	<div class="container">
		<div class="row">
			<div class="box table-responsive">
				<table class="table table-bordered">
	                <thead>
	                    <tr>
	                        <td>名字</td>
	                        <td>发布内容</td>
	                        <td>发布时间</td>
	                    </tr>
	                </thead>
	                <tbody>

	                </tbody>
	            </table>
			</div>
		</div>
	</div>
		
	<nav aria-label="Page navigation" style=" text-align: center;">
	  <ul class="pagination">
	    <li page=-1 onclick="page(this)">
	      <a aria-label="Previous">
	        <span aria-hidden="true">&laquo;</span>
	      </a>
	    </li>
	    <li page=1 onclick="page(this)" class="active"><a>1</a></li>
	    <li page=2 onclick="page(this)"><a>2</a></li>
	    <li page=3 onclick="page(this)"><a>3</a></li>
	    <li page=4 onclick="page(this)"><a>4</a></li>
	    <li page=5 onclick="page(this)"><a>5</a></li>
	    <li page=6 onclick="page(this)"><a>6</a></li>
	    <li page=-2 onclick="page(this)">
	      <a aria-label="Next">
	        <span aria-hidden="true">&raquo;</span>
	      </a>
	    </li>
	  </ul>
	</nav>
		

		<script src = 'jquery.min.js'></script>
		<script>
			// 选择页码
			function page(a) {
				$.ajax({
					url: 'http://127.0.0.1:8989/getPage',
					method: 'get',
					dataType: 'json',
					data: {
						page:$(a).attr('page')
					},
					success:function(res){
						$('tbody').html('');
						add(res.result,res.page);
					}
				})
			}		

			function add(data,page) {
            for (var i in data) {
                $('tbody').append(
                    `<tr>
						<td>${data[i].name}</td>
						<td>${data[i].con}</td>
						<td>${data[i].time}</td>
					</tr>`
                );

                // li的active变动
                $('li[page]').each(function() {
                	$(this).removeClass('active');
                });
                $('li[page='+page.currentPage+']').addClass('active')
            }
        }

        $.ajax({
			url: 'http://127.0.0.1:8989/all',
			method: 'get',
			dataType: 'json',
			success:function(res){
				add(res.result,res.page);
			}
		})	
		</script>
	</body>
</html>